<template>
	<div class="menu">
		<!-- 用户信息 -->
		<div class="user">
			<div class="headerImg">
				<img src="../../public/img/header.jpg" alt="" />
			</div>
			<div class="userInfo">
				<span style="margin-bottom: 10px; color: #666;">{{username}}</span>
				<span>{{realName}}</span>
			</div>
		</div>
		<!-- 菜单 -->
		<el-row>
			<el-col>
				<el-menu active-text-color="#2c72e7" background-color="#fff" text-color="#000" 
				 :default-active="activeIndex" style="--el-menu-hover-bg-color:#e6e6eb">
					<el-menu-item v-for="(item, index) in menuItems" :key="index" :index="index" @click="selectMenu(this.menuItems[index].component)">
						<div>
							<span>{{menuItems[index].value}}</span>
						</div>
					</el-menu-item>
				</el-menu>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import { mapActions } from 'vuex'
	
	export default {
		
		props: ['username','realName'],
		
		//数据模型
		data(){
			return {
				// 默认选中的菜单项的index
				activeIndex: 0, 
				//菜单项
				menuItems: [
				        { value: '服务管理', component: 'PubService' },
				        { value: '活动管理', component: 'Activity' }
				      ]
			}
		},
		
		//方法
		methods: {
			
			selectMenu(menuItem) {
			      this.$emit('menu-selected', menuItem);
			}
			
		},
		
		beforeMount() {
			this.selectMenu(this.menuItems[this.activeIndex].component)
		}
	}
</script>

<style scoped>
	.menu {
		width: 260px;
	}
	
	.user{
		width: 100%;
		height: 100px;
		display: flex;
		align-items: center;
		padding-left: 50px;
		cursor: default;
	}
	
	.headerImg{
		margin-right: 20px;
	}
	
	.headerImg>img{
		width: 50px;
		height: 50px;
		border-radius: 25px;
	}
	
	.userInfo{
		display: flex;
		flex-direction: column;
		font-size: 13px;
	}


</style>